<template>
  <div class="booking-list">
    <div class="space-y-4">
      <div
        v-for="booking in bookingList"
        :key="booking.id"
        class="booking-card bg-white dark:bg-gray-800 rounded-lg shadow-sm p-4"
      >
        <div class="flex justify-between items-start mb-4">
          <div>
            <h4 class="text-lg font-medium text-gray-900 dark:text-white mb-2">
              {{ booking.hotelName }}
            </h4>
            <div class="text-sm text-gray-500 dark:text-gray-400">
              订单号：{{ booking.orderNo }}
            </div>
          </div>
          <div class="text-right">
            <div class="text-sm mb-2">
              <el-tag :type="getStatusType(booking.status)">
                {{ getStatusText(booking.status) }}
              </el-tag>
            </div>
            <div
              class="text-lg font-bold text-primary-600 dark:text-primary-400"
            >
              ¥{{ booking.totalAmount }}
            </div>
          </div>
        </div>

        <div class="border-t border-gray-100 dark:border-gray-700 pt-4">
          <div class="grid grid-cols-2 gap-4 text-sm">
            <div>
              <div class="text-gray-500 dark:text-gray-400 mb-1">入住时间</div>
              <div class="text-gray-900 dark:text-white">
                {{ booking.checkIn }}
              </div>
            </div>
            <div>
              <div class="text-gray-500 dark:text-gray-400 mb-1">离店时间</div>
              <div class="text-gray-900 dark:text-white">
                {{ booking.checkOut }}
              </div>
            </div>
            <div>
              <div class="text-gray-500 dark:text-gray-400 mb-1">房型</div>
              <div class="text-gray-900 dark:text-white">
                {{ booking.roomType }}
              </div>
            </div>
            <div>
              <div class="text-gray-500 dark:text-gray-400 mb-1">房间数</div>
              <div class="text-gray-900 dark:text-white">
                {{ booking.roomCount }}间
              </div>
            </div>
          </div>
        </div>

        <div class="flex justify-end gap-2 mt-4">
          <el-button
            v-if="booking.status === 'unpaid'"
            type="primary"
            size="small"
            @click="handlePay(booking)"
          >
            立即支付
          </el-button>
          <el-button
            v-if="booking.status === 'unconfirmed'"
            type="success"
            size="small"
            @click="handleCheckIn(booking)"
          >
            确认入住
          </el-button>
          <el-button
            v-if="['unpaid', 'unconfirmed'].includes(booking.status)"
            type="danger"
            size="small"
            plain
            @click="handleCancel(booking)"
          >
            取消订单
          </el-button>
          <el-button
            v-if="booking.status === 'completed'"
            type="primary"
            size="small"
            plain
            @click="handleReview(booking)"
          >
            评价
          </el-button>
          <el-button size="small" @click="handleViewDetail(booking)">
            查看详情
          </el-button>
        </div>
      </div>
    </div>

    <!-- 空状态 -->
    <el-empty
      v-if="!loading && !bookingList.length"
      :description="getEmptyText()"
    />

    <!-- 加载状态 -->
    <div v-if="loading" class="flex justify-center py-8">
      <el-skeleton :rows="3" animated />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";

const props = defineProps({
  type: {
    type: String,
    required: true,
    validator: (value) =>
      ["all", "unpaid", "unconfirmed", "completed", "cancelled"].includes(
        value,
      ),
  },
});

const router = useRouter();
const loading = ref(false);
const bookingList = ref([
  {
    id: 1,
    orderNo: "H202403150001",
    hotelName: "贵港大酒店",
    status: "unpaid",
    totalAmount: 388,
    checkIn: "2024-03-15",
    checkOut: "2024-03-16",
    roomType: "豪华大床房",
    roomCount: 1,
  },
  {
    id: 2,
    orderNo: "H202403140002",
    hotelName: "贵港豪华精选酒店",
    status: "unconfirmed",
    totalAmount: 588,
    checkIn: "2024-03-14",
    checkOut: "2024-03-15",
    roomType: "行政套房",
    roomCount: 1,
  },
  {
    id: 3,
    orderNo: "H202403130003",
    hotelName: "贵港大酒店",
    status: "completed",
    totalAmount: 776,
    checkIn: "2024-03-13",
    checkOut: "2024-03-14",
    roomType: "豪华大床房",
    roomCount: 2,
  },
]);

const getStatusType = (status) => {
  const statusTypes = {
    unpaid: "warning",
    unconfirmed: "info",
    completed: "success",
    cancelled: "info",
  };
  return statusTypes[status];
};

const getStatusText = (status) => {
  const statusTexts = {
    unpaid: "待付款",
    unconfirmed: "待入住",
    completed: "已完成",
    cancelled: "已取消",
  };
  return statusTexts[status];
};

const getEmptyText = () => {
  const emptyTexts = {
    all: "暂无订单",
    unpaid: "暂无待付款订单",
    unconfirmed: "暂无待入住订单",
    completed: "暂无已完成订单",
    cancelled: "暂无已取消订单",
  };
  return emptyTexts[props.type];
};

const handlePay = (booking) => {
  router.push(`/order/payment/${booking.id}`);
};

const handleCheckIn = (booking) => {
  // TODO: 实现确认入住逻辑
};

const handleCancel = (booking) => {
  // TODO: 实现取消订单逻辑
};

const handleReview = (booking) => {
  // TODO: 实现评价逻辑
};

const handleViewDetail = (booking) => {
  router.push(`/order/detail/${booking.id}`);
};

onMounted(() => {
  // TODO: 根据type加载对应状态的订单列表
});
</script>

<style lang="scss" scoped>
.booking-list {
  .booking-card {
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-2px);
      box-shadow:
        0 4px 6px -1px rgb(0 0 0 / 0.1),
        0 2px 4px -2px rgb(0 0 0 / 0.1);
    }
  }
}
</style>
